import { Redirect, Route, RouteProps } from 'react-router-dom';
import { hasToken } from '../../utils/storage';

// 1.使用interface继承内置类型RouteProps，可能没有自动导入
interface AuthRouteProps extends RouteProps {
  // 2.改造component的类型为React。FC；React。FC代表函数是组件
  component: React.FC;
  path: string;
  // 使用索引类型,支持任意属性
  [key: string]: any;
}

export type LocationStateType = {
  fromPath: string;
};
export default function AuthRoute(props: AuthRouteProps) {
  const { component: Component, path, ...restProps } = props;
  return (
    <Route
      {...restProps}
      path={path}
      // props重名，形参改为_props
      render={(_props: any) => {
        if (hasToken()) {
          return <Component {..._props}></Component>;
        }
        // 路由传参 第一种写法
        // _props.history.push('/login', {
        //   fromPath: path,
        // });

        // 第二种写法
        return (
          <Redirect
            to={{
              pathname: '/login',
              state: {
                fromPath: path,
              },
            }}
          ></Redirect>
        );
      }}
    ></Route>
  );
}
